<template>
	<view>
		<u-sticky>
			<view class="top">
				<view class="left">
					<view class="name">
						兑换蜂巢
					</view>
					<view class="text">
						已累计兑换<text> {{count}} </text> 个蜂巢
					</view>
				</view>
				<view class="right">
					<view class="list" @click="toPage('record')">
						<image src="../static/g1.png" mode=""></image>
						<view class="name">
							兑换记录
						</view>
					</view>
				</view>
			</view>
		</u-sticky>
		<view class="content">
			<view v-if="list.length>0">
				<view class="list" v-if="item.show" v-for="(item,index) in list" :key="index">
					<image :src="img_pre+item.fang_manor_logo" class="head"></image>
					<view class="number">
						<view class="type">
							金牌等级
						</view>
						<view class="up font">
							{{item.init_price}}<text>Ghy</text>
						</view>
						<view class="down">
							兑换价值
						</view>
					</view>
					<view class="icon" @click="id=index,init_price=item.init_price,logistics=true">
						<image src="../static/g2.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="none" v-else>
				<view class="none_content">
					<image src="../static/s5.png" class="img"></image>
					<view class="left">
						<view class="up">
							开场时间 <text>12:00-13:00</text>
						</view>
						<view class="down">
							请及时兑换
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="logistics" close-icon-pos="top-left" :closeable="true" borderRadius="10" mode="bottom">
			<view class="logistics">
				<view class="_view">
					<view class="title_item">
						兑换
					</view>
					<view class="appeal">
						兑换{{manor_title}}需要
					</view>
					<view class="number">
						{{init_price}} <text>金蜜</text>
					</view>
				</view>
				<button type="default" class="button" @click="checkSafePasswordEmpty">确认兑换</button>
				<view class="popup_top"></view>
			</view>
		</u-popup>
		<u-popup v-model="logistics2" close-icon-pos="top-left" mode="bottom" :closeable="true" borderRadius="10">
			<view class="fight">
				<view class="title_item">
					恭喜兑换成功
				</view>
				<view class="icon">
					<image src="/static/image/p0.png" mode=""></image>
				</view>
				<view class="appeal">
					请到我的-我的蜂巢中 进行下一步操作
				</view>
				<button type="default" class="button" @click="zhidao">前往查看</button>
			</view>
		</u-popup>
		<u-keyboard mode="number" :dot-enabled="false" v-model="pay" :tooltip="false" @change="onChange"
			@backspace="onBackspace">
			<view>
				<view class="u-text-center">
					<view class="u-text-name">
						二级密码
					</view>
					<view class="u-text-text">
						您当前正在进行交易，为确保账户安全请输入二级 密码验证身份
					</view>
				</view>
				<view class="u-flex u-row-center">
					<u-message-input mode="box" :maxlength="6" :dot-fill="true" v-model="password"
						:disabled-keyboard="true"></u-message-input>
				</view>
				<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips"></view>
			</view>
		</u-keyboard>
	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				logistics: false,
				logistics2: false,
				pay: false,
				count: "",
				list: [],
				id: 0,
				password: "",
				page: 1,
				init_price: 0,
				timeout: 2000,
				maid: 0,
				manor_title: ""
			}
		},
		onLoad(option) {
			than = this;
			than.maid = option.maid;
			than.getlist()
		},
		onReachBottom() {
			than.page++;
			than.getlist()
		},
		methods: {
			zhidao() {
				than.logistics2 = false;
				than.toPage('/pages/htmlB/my/index?current=1')
			},
			getlist() {
				than.post("api/Goldbean/goldBeanGoodsList", {
					page: than.page,
					maid: than.maid
				}, function(data) {
					than.count = data.count;
					if (data.list.length > 0) {
						than.manor_title = data.list[0].manor_title
					}
					for (let i in data.list) {
						data.list[i].show = true
					}
					if (than.page == 1) {
						than.list = data.list;
					} else {
						than.list = than.list.concat(data.list)
					}
				})
			},
			checkSafePasswordEmpty() {
				than.post("api/member/checkSafePasswordEmpty", null, function(data) {
					if (parseInt(data) == 0) {
						than.toast("未设置二级密码")
						uni.navigateTo({
							url: "/pages/htmlA/setting/twopassword"
						})
					} else {
						than.pay = true;
					}
				})
			},
			onChange(val) {
				if (this.password.length < 6) {
					this.password += val;
				}

				if (this.password.length >= 6) {
					uni.showLoading({
						title: '请稍后'
					});
					than.$u.debounce(than.getResult);
				}
			},
			getResult() {
				than.post("api/Goldbean/exchangeGoldGoods", {
					gold_id: than.list[than.id].gold_id,
					password: than.password
				}, function(data) {
					uni.hideLoading();
					than.list[than.id].show = true
					than.pay = false;
					than.logistics2 = true;
				})
				this.password = '';
			},
			onBackspace(e) {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1);
				}
			}
		}
	}
</script>

<style lang="less">
	page {
		background: #FAFAFA;
	}

	.none {
		margin: auto;
		height: 262rpx;

		.none_content {
			background: #EDF1FD;
			width: 678rpx;
			height: 100%;
			display: flex;
			align-items: center;
			text-align: left;

			.left {

				.up {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;

					text {
						font-size: 32rpx;
						font-family: DIN Medium;
						font-weight: 400;
						color: #205FFA;
					}
				}

				.down {
					margin-top: 30rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
				}
			}

			.img {
				width: 193rpx;
				height: 193rpx;
				margin-left: 23rpx;
				margin-right: 24rpx;
			}
		}
	}

	.fight {
		text-align: center;
		padding-bottom: 32rpx;

		.title_item {
			height: 113rpx;
			line-height: 113rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			border-bottom: 1px solid #F6F6F6;
		}

		.appeal {
			margin-top: -20rpx;
			margin-bottom: 40rpx;
			padding: 0 250rpx;
			font-size: 24rpx;
			line-height: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
		}

		.icon {
			text-align: center;

			image {
				width: 426rpx;
				height: 391rpx;
			}
		}

		.button {
			width: 245rpx;
			height: 74rpx;
			background: #FB683D;
			border-radius: 20rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}

	.logistics {
		text-align: center;

		.popup_top {
			height: 30rpx;
		}

		._view {
			background: #FFFFFF;

			.title_item {
				height: 108rpx;
				line-height: 108rpx;
				text-align: center;
				border-bottom: 2rpx solid #F6F6F6;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				margin-bottom: 20rpx;
			}

			.appeal {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}

			.number {
				font-size: 48rpx;
				font-family: DINCond-Black;
				font-weight: bold;
				color: #FB683D;
				text-align: center;
				padding-bottom: 20rpx;

				text {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
				}
			}
		}

		.button {
			border-radius: 40rpx;
			border: 0;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			width: 245rpx;
			height: 74rpx;
			background: #FB683D;
			border-radius: 20rpx;
		}
	}

	.content {
		width: 100%;

		.list {
			margin: 0 auto 24rpx;
			background: #FFFFFF;
			width: 678rpx;
			border-radius: 20rpx;
			height: 178rpx;
			position: relative;
			display: flex;
			align-items: center;

			.img {
				position: absolute;
				top: 1rpx;
				right: 19rpx;
				width: 50rpx;
				height: 50rpx;
			}

			.icon {
				margin-right: 24rpx;
				margin-left: auto;

				image {
					width: 77rpx;
					height: 77rpx;
				}

				.name {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #666666;
				}
			}

			.number {
				width: 250rpx;

				.type {
					height: 32rpx;
					display: initial;
					background: #F5E5D8;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #B8845C;
					padding: 0 9rpx;
				}

				.up {
					font-style: initial;
					font-size: 44rpx;
					font-family: DINCond-Black;
					font-weight: bold;

					text {
						margin-left: 10rpx;
						font-size: 32rpx;
					}
				}

				.down {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: bold;
				}
			}


			.head {
				width: 144rpx;
				height: 144rpx;
				margin: 0 24rpx;
				border-radius: 10rpx;
				text-align: center;

				image {
					margin: 20rpx 0 0;
					width: 56rpx;
					height: 62rpx;
				}

				.name {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
				}
			}

			.a1 {
				background: #FFF4EE;
				color: #C2765B;
			}

			.a2 {
				background: #F7F7F7;
				color: #8287A4;
			}

			.a3 {
				background: #FFFCEE;
				color: #C6891E;
			}

			.a4 {
				background: #F4F4F4;
				color: #AB8154;
			}
		}
	}

	.title {
		padding: 0 62rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: #F4F4F7;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		position: fixed;
		width: 100%;
		top: 300rpx;
		z-index: 30;

		.img {
			width: 376rpx;
			height: 62rpx;
			position: fixed;
			left: 168rpx;
			top: 270rpx;
		}
	}

	.top {
		height: 170rpx;
		width: 100%;
		display: flex;
		align-items: center;
		background: #FAFAFA;

		.left {
			padding-left: 61rpx;

			.jingyan {
				width: 32rpx;
				height: 23rpx;
			}

			.name {
				font-size: 46rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #2F3336;
			}

			.text {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #24282B;

				text {
					font-weight: bold;
					color: #3362FA;
					font-size: 36rpx;
					margin: 0 10rpx;
				}
			}
		}

		.right {
			padding-right: 35rpx;
			margin-left: auto;
			display: flex;
			align-items: center;

			.list {
				text-align: center;

				image {
					width: 59rpx;
					height: 59rpx;
				}

				.name {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				margin-left:40rpx;
			}
		}
	}
</style>
